<template>
	<view>
		<view class="content_user">
			<view class="content_user_left">
				<view class="image_t"><up-image width="80rpx" height="80rpx" :src="data.service.icon"
						mode="aspectFill"></up-image></view>
				<view>
					<view class="txt_t">{{data.service.serviceName}}</view>
					<view class="txt_f">{{data.service.serviceTime}}</view>

				</view>

			</view>

		</view>

		<view class="content">
			<view class="content1">
				<text>收款金额</text>
				<text>{{data.money}}元</text>
			</view>
			<view class="content2">
				<view>
					<text>订单号：</text>
					<text>{{data.orderNo}}</text>
				</view>
				<!-- <view>
					<text>预约时间：</text>
					<text>{{data.yuyueTime}}</text>
				</view> -->
				<view>
					<text>购买数量：</text>
					<text>{{data.buyCount}}</text>
				</view>
				<view>
					<text>下单时间：</text>
					<text>{{data.createdAt}}</text>
				</view>
				<view>
					<text>支付时间：</text>
					<text>{{data.payAt}}</text>
				</view>
				<view>
					<text>联系人：</text>
					<text>{{JSON.parse(data.addressSnapshot).name}} {{JSON.parse(data.addressSnapshot).mobile}}</text>
				</view>
				<view>
					<text>收货信息：</text>
					<text>{{ address(data.addressSnapshot)}}</text>
				</view>

			</view>
		</view>

		<up-modal :show="show" showCancelButton title="提示" :content='content' @confirm="confirm" @cancel="show=false"
			closeOnClickOverlay ref="uModal" :asyncClose="true"></up-modal>
		<view class="footer_btn">
			<view>
				<up-button class="up-button" @click="onStart" :loading="loading"
					color="linear-gradient(to right, rgb(216, 0, 0), rgb(213, 90, 2))" shape="circle"
					text="确认收款"></up-button>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		useStore
	} from '@/store/index.js'
	import {
		orderCheckApi,
		orderStartApi,
		qrcodeDetailApi,
		orderQrcodeApi,
		orderFinishApi
	} from '@/api/order.js'

	import {
		onLoad,
		onUnload
	} from "@dcloudio/uni-app"
	import {
		reactive,
		toRefs,
		ref,
		watch,
		computed,
		onMounted,
	} from "vue"
	export default {
		setup() {
			const store = useStore()
			const state = reactive({
				userInfo: computed(() => store.userInfo),
				list: [],
				loading: false,
				qrCodeList: [],
				type: null,
				QRcode: '',
				data: {},

			})
			onLoad(async (res) => {
				state.QRcode = res.QRcode
				await getData()
				getQrCode()

			})
			const getData = async () => {
				const {
					data
				} = await qrcodeDetailApi(state.QRcode)
				state.data = data
			}
			const address = (data) => {
				if (data) {
					let addressInfo = JSON.parse(data)
					return `${addressInfo.provinceName}  ${addressInfo.urbanName} ${addressInfo.areaName } ${addressInfo.address}`
				}

			}
			const getQrCode = async () => {
				const {
					data
				} = await orderQrcodeApi(state.data.id)
				state.qrCodeList = data
			}
			const onStart = async () => {
				state.loading = true
				let qrCodeList = state.qrCodeList.filter((item) => item.status == 1)
				if (qrCodeList.length == 0) {
					await orderStartApi({
						orderNo: state.data.orderNo
					})
				}


				try {
					await orderCheckApi(
						state.QRcode
					)
					setTimeout( async()=>{
						await getQrCode()
						let CodeList = state.qrCodeList.filter((item) => item.status == 1)
						if (CodeList.length == state.qrCodeList.length) {
							await orderFinishApi({
								orderNo: state.data.orderNo
							})
						}
						uni.$u.toast("收款成功！");
						uni.navigateBack()
						state.loading = false
						
					},2000)

					

				} catch {
					state.loading = false

				}

			}


			return {
				...toRefs(state),
				getData,
				getQrCode,
				onStart,
				address,

			}
		}
	}
</script>
<style>
	page {
		background-color: #EFEFEF;
	}
</style>
<style scoped lang="scss">
	.sr_title {
		width: 100%;
		height: 10vh;
		background-color: #38393E;
		position: relative;

		.sr_title1 {
			width: 100%;
			height: 40%;
			position: absolute;
			bottom: 0;
			left: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			color: white;

			view:nth-child(1) {
				width: 40%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: flex-start;

				image {
					width: 12%;
					height: 100%;
					margin: 0 5%;
				}
			}

			view:nth-child(2) {
				width: 60%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: flex-start;
			}
		}
	}

	.content_user {
		padding: 20rpx;
		background-color: white;
		display: flex;
		align-items: center;
		justify-content: center;

		.content_user_left {
			flex: 1;
			display: flex;

			justify-content: flex-start;

			.image_t {
				width: 80rpx;
				margin-right: 20rpx;
			}

			.txt_t {
				font-size: 28rpx;
			}

			.txt_f {
				font-size: 26rpx;
				color: #aaa;
			}


		}

		.content_user_right {
			width: 90rpx;
			display: flex;
			align-items: center;
			justify-content: flex-end;

			image {
				width: 20%;
				height: 100%;
				margin: 0 8% 0 0;
			}
		}
	}

	.content {
		width: 100%;
		margin-top: 5%;

		.content1 {
			width: 100%;
			height: 5vh;
			background-color: white;
			display: flex;
			align-items: center;
			justify-content: space-between;

			text:nth-child(1) {
				margin-left: 5%;
			}

			text:nth-child(2) {
				margin-right: 5%;
			}
		}

		.content2 {
			background-color: white;

			view {
				width: 100%;
				height: 60rpx;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				margin-left: 5%;
				margin-bottom: 1%;

				text:nth-child(1) {
					width: 160rpx;
					color: #B2B2B2;
					font-size: 28rpx;
				}

				text:nth-child(2) {
					font-size: 28rpx;
					flex: 1;
				}
			}
		}
	}

	.footer_btn {
		background: #fff;
		height: 80rpx;
		width: calc(100% - 40rpx);
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 10;
		padding: 20rpx;
	}
</style>